<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/base/headcss.jsp"%>
<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>树形菜单</title>
	<link rel="stylesheet" type="text/css" href="${path}/scripts/css/zTreeStyle/zTreeStyle.css"/>
	<style type="text/css">
		.frame1{
			  width:100%;
			  height:600px;
			  border-width:0px;
			}
	    
	</style>
	</head>
	<body>
       <div class="row" >
       		   <div class="col-xs-2 ">
       		         <div class="zTreeDemoBackground right"  >
						<ul id="tree" class="ztree"></ul>
       		   		 </div>
       		   </div>
       		   <div class="col-xs-10">
       		   		<iframe id="resourceFrame" class="frame1"  src="" > </iframe>
       		   </div>
       </div>
	</body> 
     <script type="text/javascript" src="${path}/scripts/jQuery/jquery-1.10.2.min.js" ></script>
     <script type="text/javascript" src="${path}/scripts/js/jquery.ztree.all.min.js" ></script>
     <script type="text/javascript">
            var zTree;
            var setting = {
                view: {
                    dblClickExpand: false,
                    showLine: true,
                    selectedMulti: false,
           			showIcon: false
                },
                data: {
                    simpleData: {
                        enable:true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: ""
                    }
                },
                callback: {
                    beforeClick: function(treeId, treeNode) {
                        var zTree = $.fn.zTree.getZTreeObj("tree");
                        if (treeNode.isParent) {
                            zTree.expandNode(treeNode);
                            return true;
                        } else {
                            return true;
                        }
                    },
                    onClick: zTreeOnClick
                }
            };

            function zTreeOnClick(event, treeId, treeNode) {
            	  
                 $("#resourceFrame").attr("src",'${path}/resource/getResource?id='+treeNode.id);
            };
            var zNodes ;
            $(document).ready(function(){
                var t = $("#tree");
                $.ajax({
                       type: "POST",//方法类型
                       dataType: "json",//预期服务器返回的数据类型
                       url: "${path}/resource/treeList" ,//url
                       success: function (data) {   
                    	 console.log(data);
                    	 zNodes = data;
                    	 t = $.fn.zTree.init(t, setting, zNodes);
                       },
                       error : function() {
                           alert(" 请求失败！");
                       }
                   });
          
                 
            });
           
       </script>
	 
</html>